<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="slot-example">
			
			<!-- 
			现在当我们使用 <todo-list> 组件的时候，
			我们可以选择为 todo 定义一个不一样的 <template> 作为替代方案，
			并且可以从子组件获取数据：
			-->
			<todo-list v-bind:todos="todos">
				<template v-slot:todo="{todo}">
					<span v-if="todo.isComplete">✓</span>
					{{todo.text}}
				</template>
			</todo-list>
		</div>	
		<!--
		具名插槽的缩写
		跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header：
		 -->
		<script type="text/javascript">
			Vue.component('todo-list',{
				props:['todos']
				,
				template:`
				<ul>
					<li v-for="todo in todos"
					v-bind:key="todo.id"
					>
						<!-- 
						我们为每个todo 主备一个插槽
						将todo 对象作为一个插槽的prop 传入
						-->
						<slot name="todo" v-bind:todo="todo">
							{{todo.text}} 
						</slot>
					</li>
				</ul>
				`
			})
			
			
			
			
			let app=new Vue({
				el:'#slot-example',
				data:{
					todos:[
						{id:1,text:'zhangsan1'},
						{id:2,text:'zhangsan2'},
						{id:3,text:'zhangsan3'},
						{id:4,text:'zhangsan4',isComplete:true},
					],
				},
				
			})
		</script>	
		<style type="text/css">
		</style>
	</body>
</html>
